<template>
  <uni-popup ref="popup" background-color="#fff">
    <div class="loading flex flex-col justify-center items-center">
      <img class="load-img" :src="`${imgUrl.images}/loading/load.gif`" alt="" />
      <p class="load-content mt-5">{{ content }}</p>
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
import imgUrl from '@/config/imgUrl'
import { ref, watchEffect } from 'vue'
interface loadingProp {
  loading: boolean
  content?: string
}
const props = withDefaults(defineProps<loadingProp>(), {
  loading: true,
  content: '',
})

const popup = ref(null) as any
watchEffect(() => {
  if (popup.value) {
    if (props.loading) {
      popup.value.open()
    } else {
      popup.value.close()
    }
  }
})
</script>

<style lang="scss" scoped>
.loading {
  left: 0;
  top: 0;
  position: fixed;
  z-index: 999;
  width: 100vw;
  height: 100vh;
}
.load-img {
  width: 200rpx;
  height: 234rpx;
  opacity: 1;
}
.load-content {
  color: #fff;
}
</style>
@/config/OssUrl
